<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="中文" name="first">
        <el-form ref="form" :model="form" label-width="160px">
          <el-form-item label="活动名称">
            {{ form.activityName }}
          </el-form-item>
          <el-form-item label="排序">
            {{ form.sort }}
          </el-form-item>
          <el-form-item label="活动开始时间" v-if="activityType != 1">
            {{ form.activityStartTime }}
          </el-form-item>
          <el-form-item label="预约开始时间" v-if="activityType != 1">
            {{ form.activityReservationStartTime }}
          </el-form-item>
          <el-form-item label="预约结束时间" v-if="activityType != 1">
            {{ form.activityReservationEndTime }}
          </el-form-item>
          <el-form-item label="三级菜单" v-if="activityType != 1">
            {{ form.activityMenuName }}
          </el-form-item>
          <el-form-item label="WAP端封面">
            <!-- <a :href="form.wapImgUrl">{{ form.wapImgUrl }}</a> -->
            <el-image
              style="width: 100px; height: 100px"
              :src="baseUrl + form.wapImgUrl"
            ></el-image>
          </el-form-item>
          <el-form-item label="PC端封面">
            <el-image
              style="width: 100px; height: 100px"
              :src="baseUrl + form.pcImgUrl"
            ></el-image>
          </el-form-item>
          <el-form-item label="排队取号须知">
            <el-input
              type="textarea"
              v-model="form.queuingInstructions"
              readonly
            />
          </el-form-item>
          <el-form-item label="活动介绍">
            <div
              v-html="form.activityIntroduce"
              style="border: 1px solid #c0c4cc; padding: 5px 15px"
            ></div>
          </el-form-item>
          <el-form-item label="活动地点">
            <el-input type="textarea" v-model="form.activityPlace" readonly />
          </el-form-item>
          <el-form-item label="是否亲子活动" v-if="activityType != 1">
            <el-radio-group v-model="form.isParentChild" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否收费" v-if="activityType != 1">
            <el-radio-group v-model="form.isCharge" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="英文" name="second">
        <el-form ref="form" :model="form" label-width="160px">
          <el-form-item label="活动名称">
            {{ form.activityNameEn }}
          </el-form-item>
          <el-form-item label="排序">
            {{ form.sort }}
          </el-form-item>
          <el-form-item label="活动开始时间" v-if="activityType != 1">
            {{ form.activityStartTime }}
          </el-form-item>
          <el-form-item label="预约开始时间" v-if="activityType != 1">
            {{ form.activityReservationStartTime }}
          </el-form-item>
          <el-form-item label="预约结束时间" v-if="activityType != 1">
            {{ form.activityReservationEndTime }}
          </el-form-item>
          <el-form-item label="三级菜单" v-if="activityType != 1">
            {{ form.activityMenuName }}
          </el-form-item>
          <el-form-item label="WAP端封面">
            <el-image
              style="width: 100px; height: 100px"
              :src="baseUrl + form.wapImgUrl"
            ></el-image>
          </el-form-item>
          <el-form-item label="PC端封面">
            <el-image
              style="width: 100px; height: 100px"
              :src="baseUrl + form.pcImgUrl"
            ></el-image>
          </el-form-item>
          <el-form-item label="排队取号须知">
            <el-input
              type="textarea"
              v-model="form.queuingInstructionsEn"
              readonly
            />
          </el-form-item>
          <el-form-item label="活动介绍">
            <div
              v-html="form.activityIntroduceEn"
              style="border: 1px solid #c0c4cc; padding: 5px 15px"
            ></div>
          </el-form-item>
          <el-form-item label="活动地点">
            <el-input type="textarea" v-model="form.activityPlaceEn" readonly />
          </el-form-item>
          <el-form-item label="是否亲子活动" v-if="activityType != 1">
            <el-radio-group v-model="form.isParentChild" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否收费" v-if="activityType != 1">
            <el-radio-group v-model="form.isCharge" disabled>
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <h3>场次管理</h3>

    <el-table :data="form.activityTimeList">
      <el-table-column
        label="场次名称"
        prop="activityTimeName"
      ></el-table-column>
      <el-table-column
        label="英文场次名称"
        prop="activityTimeNameEn"
      ></el-table-column>
      <el-table-column
        label="活动起始时间"
        prop="activityBeginTime"
      ></el-table-column>
      <el-table-column
        label="活动结束时间"
        prop="activityEndTime"
      ></el-table-column>
      <el-table-column
        label="取号起始时间"
        prop="queueBeginTime"
        v-if="activityType == 1"
      ></el-table-column>
      <el-table-column
        label="取号结束时间"
        prop="queueEndTime"
        v-if="activityType == 1"
      ></el-table-column>
      <el-table-column label="限制人数" prop="limitPeopleNum"></el-table-column>
      <el-table-column label="限制入场年龄" v-if="activityType != 1">
        <template slot-scope="scope">
          <span>{{ scope.row.minAge + "-" + scope.row.maxAge }}</span>
        </template>
      </el-table-column>
    </el-table>
    <h3>审批记录</h3>
    <el-table :data="actionLogList" stripe style="width: 100%" height="350">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="preStatusText" label="当前状态" width="80">
      </el-table-column>
      <el-table-column prop="actionRoleName" label="岗位" width="90">
      </el-table-column>
      <el-table-column prop="actionUserName" label="人员" width="120">
      </el-table-column>
      <el-table-column prop="actionAt" label="操作时间" width="140">
      </el-table-column>
      <el-table-column prop="actionText" label="操作" width="100">
      </el-table-column>
      <el-table-column prop="actionNote" label="审核意见"> </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: center; margin-top: 10px">
      <el-button @click="homeDetail" type="warning">预览</el-button>
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </div>
</template>
<script>
import {
  create,
  edit,
  detail,
  getAuditUser,
  audit,
  actionLog,
} from "@/api/activityConfiguration";
import { getListByParentId } from "@/api/activityMenu";
export default {
  props: ["activityType"],
  data() {
    return {
      activeName: "first",
      activityMenuList: [],
      activityMenuCache: {},
      form: {
        id: null,
        activityType: 1,
        activityName: "",
        sort: "",
        wapImgUrl: "",
        pcImgUrl: "",
        queuingInstructions: "",
        activityIntroduce: "",
        activityPlace: "",
        activityNameEn: "",
        queuingInstructionsEn: "",
        activityIntroduceEn: "",
        activityPlaceEn: "",
        activityTimeList: [],
        activityStartTime: "",
        activityReservationStartTime: "",
        activityReservationEndTime: "",
        isParentChild: "",
        isCharge: "",
        currentStatus: null,
        activityMenuId: "",
        activityMenuName: "",
      },
      formItem: {
        activityTimeName: "",
        activityTimeNameEn: "",
        activityBeginTime: "",
        activityEndTime: "",
        queueBeginTime: "",
        queueEndTime: "",
        limitPeopleNum: "",
      },
      visible: false,
      isEdit: -1,
      baseUrl: process.env.VUE_APP_BASE_API,
      actionLogList: [],
      form2: {
        id: null,
        nextEmp: null,
      },
      nextEmpList: [],
      open2: false,
    };
  },
  methods: {
    onDetail(id, type) {
      const activityTypeValue = type || this.activityType;
      this.form.id = id;
      
      if (activityTypeValue != "1") {
        this.loadActivityMenuList(activityTypeValue);
      }
      
      detail(id).then((res) => {
        for (let key in this.form) {
          this.form[key] = res.data[key];
        }
        
        if (activityTypeValue != "1" && this.form.activityMenuId) {
          this.getActivityMenuName(activityTypeValue, this.form.activityMenuId);
        }
        
        const queryParams = {
          bizId: this.form.id,
          module: "activity",
          pageNum: 1,
          pageSize: 999,
        };
        actionLog(queryParams).then((res) => {
          this.actionLogList = res.rows;
        });
      });
    },
    onSubmit() {
      const fn = this.form.id ? edit : create;
      fn(this.form).then((res) => {
        this.$emit("success");
      });
    },
    homeDetail() {
      if (this.activityType == 1) {
        window.open(
          "https://worldskillsmuseum.cn/#/active/detail?id=" + this.form.id
        );
      } else {
        window.open(
          "http://worldskillsmuseum.cn/#/active/gongfang-detail?id=" +
            this.form.id
        );
      }
    },
    onCancel() {
      this.$emit("cancel");
    },
    onAdd() {
      this.visible = true;
    },
    onEdit(row, index) {
      for (let key in this.formItem) {
        this.formItem[key] = row[key];
      }
      this.isEdit = index;
      this.visible = true;
    },
    onSave() {
      if (this.isEdit == -1) {
        this.form.activityTimeList.push(this.formItem);
      } else {
        this.form.activityTimeList.splice(this.isEdit, 1, this.formItem);
      }
      this.visible = false;
    },
    onDelete(index) {
      this.form.activityTimeList.splice(index, 1);
    },
    onReset() {
      this.isEdit = -1;
      for (let key in this.formItem) {
        this.formItem[key] = null;
      }
    },
    redirectTo() {
      if (this.activityType != 1) {
        window.open(
          `https://worldskillsmuseum.cn/#/active/gongfang-detail?id=${this.form.id}`
        );
      } else {
        window.open(
          `https://worldskillsmuseum.cn/#/active/detail?id=${this.form.id}`
        );
      }
    },
    async submit() {
      this.form2.id = this.form.id;
      this.form2.nextEmp = null;
      this.nextEmpList = [];

      let res = await getAuditUser("1", "1");
      if (res.code == 200) {
        this.nextEmpList = res.data;
      }

      this.open2 = true;
    },
    async firstSubmit() {
      let nextEmpName = this.nextEmpList.filter(
        (item) => item.userId == this.form2.nextEmp
      )[0].userCnName;
      let res = await audit(this.form2.id, this.form2.nextEmp, nextEmpName);
      if (res.code == 200) {
        this.open2 = false;
        this.getList();
      }
    },
    loadActivityMenuList(parentId) {
      console.log('加载活动类型列表，parentId:', parentId);
      
      // 检查缓存中是否已有该parentId的数据
      if (this.activityMenuCache[parentId]) {
        console.log('使用缓存的活动类型列表');
        this.activityMenuList = this.activityMenuCache[parentId];
        
        // 如果已经有activityMenuId了，立即查找对应的名称
        if (this.form.activityMenuId) {
          this.setActivityMenuName(this.form.activityMenuId);
        }
        return;
      }
      
      // 显示加载中状态
      if (this.form.activityMenuId) {
        this.form.activityMenuName = '加载中...';
      }
      
      getListByParentId(parentId).then(res => {
        if (res.code === 200) {
          // 处理返回的rows数据
          const menuList = (res.rows || []).map(item => ({
            label: item.menuName,
            value: item.id,
            rawData: item
          }));
          
          // 保存到缓存
          this.activityMenuCache[parentId] = menuList;
          this.activityMenuList = menuList;
          
          console.log('活动类型列表已加载:', this.activityMenuList);
          
          // 如果已经有activityMenuId了，立即查找对应的名称
          if (this.form.activityMenuId) {
            this.setActivityMenuName(this.form.activityMenuId);
          }
        } else {
          console.error('获取活动类型列表失败:', res.msg);
          this.form.activityMenuName = '获取失败';
        }
      }).catch(error => {
        console.error('请求活动类型列表出错:', error);
        this.form.activityMenuName = '请求出错';
      });
    },
    
    // 根据ID设置活动类型名称
    setActivityMenuName(menuId) {
      const menuItem = this.activityMenuList.find(item => 
        String(item.value) === String(menuId)
      );
      
      if (menuItem) {
        this.form.activityMenuName = menuItem.label;
        console.log('找到活动类型名称:', menuItem.label);
      } else {
        console.warn('未找到匹配的活动类型，menuId:', menuId);
        this.form.activityMenuName = '未知类型';
      }
    },
    
    // 获取活动类型名称
    getActivityMenuName(parentId, menuId) {
      console.log('获取活动类型名称，parentId:', parentId, 'menuId:', menuId);
      
      // 如果没有menuId，则不做处理
      if (!menuId) {
        this.form.activityMenuName = '';
        return;
      }
      
      // 检查缓存中是否已有该parentId的数据
      if (this.activityMenuCache[parentId]) {
        console.log('使用缓存的活动类型数据查找名称');
        this.activityMenuList = this.activityMenuCache[parentId];
        this.setActivityMenuName(menuId);
        return;
      }
      
      // 如果已经加载了活动类型列表且parentId匹配，直接从中查找
      if (this.activityMenuList && this.activityMenuList.length > 0) {
        this.setActivityMenuName(menuId);
        return;
      }
      
      // 显示加载中状态
      this.form.activityMenuName = '加载中...';
      
      // 否则重新获取活动类型列表
      getListByParentId(parentId).then(res => {
        if (res.code === 200 && res.rows) {
          // 处理返回的rows数据
          const menuList = (res.rows || []).map(item => ({
            label: item.menuName,
            value: item.id,
            rawData: item
          }));
          
          // 保存到缓存
          this.activityMenuCache[parentId] = menuList;
          this.activityMenuList = menuList;
          
          console.log('活动类型列表:', this.activityMenuList);
          
          // 查找对应的名称
          this.setActivityMenuName(menuId);
        } else {
          console.error('获取活动类型列表失败:', res.msg);
          this.form.activityMenuName = '获取失败';
        }
      }).catch(error => {
        console.error('请求活动类型列表出错:', error);
        this.form.activityMenuName = '请求出错';
      });
    },
  },
};
</script>
